<template>
    <div>
    <el-row>
      <!-- 按钮区 -->
      <el-col :span="24">
        <div class="button-wrapper">
        </div>
      </el-col>
    </el-row>
    <!-- 表格 -->
    <el-row>
      <el-col :span="24">
        <div class="data-wrapper">
          <template v-if="tableData!=null">
          <el-table ref="multipleTable" :data="tableData"  tooltip-effect="dark" style="width: 100%" >
             <el-table-column type="index" label="序号" :index="indexMethod">
            </el-table-column>
            <el-table-column prop="modelNum" label="模型编号">
            </el-table-column>
            <el-table-column prop="modelName" label="模型名称" >
            </el-table-column>
            <el-table-column fixed="right" label="操作" align="center" width="200">
            <template slot-scope="scope">
              <el-button title="查看" size="small" icon="el-icon-edit" type="success" circle @click="handleDetail(scope.$index, scope.row)"></el-button>
            </template>
           </el-table-column>
          </el-table>
          </template>
        </div>
      </el-col>
    </el-row>
    <!-- 底部按钮和分页 -->
    <el-row :gutter="20" v-if="dataCount" type="flex" justify="space-between" align="center" class="page-wrapper">
      <el-col :span="20">
        <div class="page-item">
          <el-pagination background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="listQuery.currentPage"
          :page-sizes="pageSizes"
          :page-size="listQuery.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="dataCount"/>
        </div>
      </el-col>
    </el-row>

     <!-- 弹出窗口区域 -->
    <el-dialog title="模型详情" :visible.sync="detaildialog">
        <el-form :model="oneCol" v-if="oneCol" ref="oneCol">
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="模型编号" :label-width="formLabelWidth" prop="modelNum">
              <el-input v-model="oneCol.modelNum" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="模型名称" :label-width="formLabelWidth" prop="modelName">
              <el-input v-model="oneCol.modelName" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="模型备注" :label-width="formLabelWidth" prop="modelNote">
            <el-input v-model="oneCol.modelNote" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" type="primary" @click="handleCancel('oneCol')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      //用户数据
      tableData: [{
        modelNum:'x21',
        modelName:'基于模糊综合评价的水质分析模型',
        modelNote:'呵呵呵'
      },{
      modelNum:'x22',
      modelName:'基于时间序列挖掘的水文站月径流预测模型',
      modelNote:'呵呵呵'
      },{
      modelNum:'x23',
      modelName:'基于小波神经网络的湖泊生态健康评价模型',
      modelNote:'呵呵呵'
      },{
      modelNum:'x24',
      modelName:'基于核主元分析的水污染突发事件只能监测模型',
      modelNote:'呵呵呵'
      },{
      modelNum:'x25',
      modelName:'基于自适应神经网络的河口水位预测模型',
      modelNote:'呵呵呵'
      },{
      modelNum:'x26',
      modelName:'基于各种各种Debug处理模型',
      modelNote:'呵呵呵'
      }],
      //默认数据总数
      dataCount:6,
      pageSizes: [10, 20, 30, 40],
      //查询条件
      listQuery: {
        currentPage: 1,
        pageSize: 5
      },
      detaildialog: false,
      form: {},
      oneCol: {},
      formLabelWidth: "100px"
    }
  },
  mounted() {
    //this.getList();
  },
  computed:{
  },
  methods: {

    //用户列表序号生成规则
    indexMethod(index) {
      return (
        index + 1 + (this.listQuery.currentPage - 1) * this.listQuery.pageSize
      );
    },

    //用户每页个数改变
    handleSizeChange(size) {
      this.listQuery.pageSize = size;
      this.listQuery.currentPage = 1;
    },
    //用户当前页改变
    handleCurrentChange(currentPage) {
      this.listQuery.currentPage = currentPage;
    },

    //显示编辑弹窗
    handleDetail(index, row) {
      this.oneCol = row;
      this.detaildialog = true;
    },
    // 树弹窗取消
        handleCancel(formName) {
          this.dialogFormVisible = false;
          this.detaildialog = false;
          this.$refs[formName].resetFields();
        }
  }
};
</script>
<style scoped>
</style>
